import React, { Component } from 'react';
import { StyleSheet, PixelRatio, Text, View, Dimensions, TouchableOpacity } from "react-native";
import Echarts from 'native-echarts';
import { style } from '../../../theme/style';


const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

export class PriceEchartsPage extends Component {

	constructor(props) {
		super(props);
		this.state = {
			index: 0, // tab选项卡
		}
	}

	_setIndex = (num) => {
		this.setState({
			index: num
		});
	}


	_getData (option, data, marketPrice) {
		var xData = [];
		var yData = [];
		for (var i = 0; i < data.length; i++) {
			xData = data[i].prodDate;
			yData = data[i].marketPrice;
		}
		let optionNew = {
			xAxis: {
				data: xData
			},
			color: ['#2F7BFF', '#007aff'],
			series: [{
				data: yData,
				type: 'line',

			}]
		}
		return Object.assign({}, option, optionNew);
	}


	render () {
		const option = {
			title: {
				show: false
			},
			grid: {
				show: true,
				left: '10%',
				right: '10%',
				top: '5%',
				bottom: '10%',
			},
			tooltip: {
				show: true
			},
			xAxis: {
				type: 'category',
				data: []
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: [],
				type: 'line',
			}]
		};
		let { index } = this.state;
		let { data } = this.props;

		let optionBranch = this._getData(option, data, 'suggestedPrice');
		let optionFinal = this._getData(option, data, 'marketPrice');   //
		let optionYesday = this._getData(option, data, 'yesterdayPrice');

		return (
			<View style={[styles.tuBox]}>
				<View style={[styles.line, styles.tabBox]}>
				</View>
				<View style={styles.tab}>
					<TouchableOpacity onPress={() => { this._setIndex(0) }} style={[styles.tabNav, index == 0 ? styles.tabNavActive : '']}>
						<Text style={styles.tabNavText}>提报价</Text>
					</TouchableOpacity>
					{/*<TouchableOpacity onPress={() => { this._setIndex(1) }} style={[styles.tabNav, index == 1 ? styles.tabNavActive : '']}>
						<Text style={styles.tabNavText}>市场价</Text>
					</TouchableOpacity>
					<TouchableOpacity onPress={() => { this._setIndex(2) }} style={[styles.tabNav, index == 2 ? styles.tabNavActive : '']}>
						<Text style={styles.tabNavText}>一口价</Text>
		</TouchableOpacity>*/}
				</View>
				<View style={[styles.chartBox]}>
					<View style={styles.height100}>
						{index == 0 ? <Echarts height={180} width={365} option={optionBranch} /> : null}
						{index == 1 ? <Echarts height={180} width={365} option={optionFinal} /> : null}
						{index == 2 ? <Echarts height={180} width={365} option={optionYesday} /> : null}
					</View>
				</View>
				{/* <Text>{optionBranch.xAxis.data.length}-{optionFinal.xAxis.data.length}-{optionYesday.xAxis.data.length}</Text> */}
			</View >

		)
	}
}

const styles = StyleSheet.create({
	line: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border
	},
	tuBox: {
		flex: 1,
		marginTop: 12 * scale,
		backgroundColor: style.color.white
	},
	tabBox: {
		height: 40 * scale
	},
	chartBox: {
		marginTop: 20 * scale,
	},
	tab: {
		position: 'absolute',
		width: '100%',
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-around'
	},
	tabNav: {
		paddingLeft: 20 * scale,
		paddingRight: 20 * scale
	},
	tabNavActive: {
		borderBottomWidth: 2 * scale,
		borderStyle: 'solid',
		borderBottomColor: style.color.themeColor,
	},
	tabNavText: {
		lineHeight: 37 * scale
	},
	height0: {
		width: 0,
		height: 0,
		overflow: 'hidden',
	},
	height100: {
		width: '100%',
		height: '100%',
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale,
		paddingBottom: 20 * scale,
		backgroundColor: style.color.white
	},
})